#{extends 'mainStage.html' /}
#{set title:'Modifier un stage'/}
<style type="text/css"> 
@import "../../../public/javascripts/jquery-ui-1.8.13.custom/css/ui-lightness/jquery-ui-1.8.13.custom.css";
</style>
<script type="text/javascript" src="../../../public/javascripts/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../../../public/javascripts/jquery-ui-1.8.13.custom/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>

<SCRIPT>
	$(function() {
		$( "#dateDeb" ).datepicker();
		$( "#dateFin" ).datepicker();
		$( "#dateExam" ).datepicker();
	});
</SCRIPT>

<div id="menu_right">
    <p>
        <a href="@{Stages.listStages}">Liste des stages</a>
    </p>
</div>

<h1 style="width:400px;">D&eacute;tails du stage ${stage}</h1>
<div id="detail_stage">
    <p> <label><b> Description : </b></label> 
    #{if stage.description == null}
        -
        #{/if}
        #{else}
        ${stage.description}
        #{/else}
    </p>
    <p> <label><b> Code  : </b></label> 
   #{if stage.code == null}
        -
        #{/if}
        #{else}
        ${stage.code}
        #{/else}
    </p>
    <p> <label><b> Structure : </b></label> 
   #{if stage.structure == null}
        -
        #{/if}
        #{else}
        ${stage.structure}
        #{/else}
   	</p>
    <p> <label><b> Nature : </b></label> 
    #{if stage.nature == null}
        -
        #{/if}
        #{else}
        ${stage.nature}
        #{/else}
    </p>
    <p> <label><b> Duree : </b></label> 
    #{if stage.duree == null}
        -
        #{/if}
        #{else}
        ${stage.duree}
        #{/else}
    </p> 
    <p> <label><b> Condition de d&eacute;roulement : </b></label> 
    #{if stage.modalites == null}
        -
        #{/if}
        #{else}
        ${stage.modalites}
        #{/else}
    </p>
    <br/>
    <p> <label><b> Lieu : </b></label> 
    #{if stage.cis == null}
        -
        #{/if}
        #{else}
        ${stage.cis}
        #{/else}
    </p>
    <p> <label><b> Directeur : </b></label> 
        #{if stage.directeur == null}
        -
        #{/if}
        #{else}
        ${stage.directeur}
        #{/else}
    </p>
    <p> <label><b> Gestionnaire Administratif : </b> </label>
        #{if stage.gestionnaireAdmin == null}
        -
        #{/if}
        #{else}
        ${stage.gestionnaireAdmin}
        #{/else}
    </p>
    <br/>
    <p> <label><b> Etat : </b></label>  
    #{if stage.etat == null}
        -
        #{/if}
        #{else}
        ${stage.etat}
        #{/else}
    </p>
    <p> <label><b> Date de d&eacute;but  : </b></label> 
    #{if stage.dateDeb == null}
        -
        #{/if}
        #{else}
        ${stage.dateDeb?.format('dd MMMM yyyy', 'fr')}
        #{/else}
    <p> <label><b> Date de fin  : </b></label> 
    #{if stage.dateFin == null}
        -
        #{/if}
        #{else}
        ${stage.dateFin?.format('dd MMMM yyyy', 'fr')}
        #{/else}
    <p> <label><b> Date d'examen  : </b></label> 
        #{if stage.dateExam == null}
        -
        #{/if}
        #{else}
        ${stage.dateExam?.format('dd MMMM yyyy', 'fr')}
        #{/else}
    </p>
    <p> <label><b> Effectif minimum  : </b></label> 
    #{if stage.effectifMin == null}
        -
        #{/if}
        #{else}
        ${stage.effectifMin}
        #{/else}
    <p> <label><b> Effectif maximum  : </b></label> 
    #{if stage.effectifMax == null}
        -
        #{/if}
        #{else}
        ${stage.effectifMax}
        #{/else}
    <p> <label><b> Effectif actuel  : </b></label> 
        #{if stage.effectif == null}
        -
        #{/if}
        #{else}
        ${stage.effectif}
        #{/else}
    </p>  
</div>
<div id="modif_stage">
<h3>Modifier le stage ${stage.intitule}</h3>
#{form @modifStage()}
 
 <style type="text/css">
 	.hidden {
 		display: none;
	}
	.visible {
 		display: inline;
	}
</style>
	<input type="hidden" name="idStage" id="idStage" value="${stage?.id}" />
    <p>
        <label for="dateDeb">Date de d&eacute;but (dd/mm/yyyy) :</label>
        <input type="text" name="dateDeb" id="dateDeb" value="${stage?.dateDeb?.format('dd/MM/yyyy', 'fr')}" />
    </p>
    <p>
        <label for="dateFin">Date de fin (dd/mm/yyyy) :</label>
        <input type="text" name="dateFin" id="dateFin" value="${stage?.dateFin?.format('dd/MM/yyyy', 'fr')}" />
  	<p>
    <p>
    	<label for="examen">La date d'examen est diff&eacute;rente de la date de fin de stage :</label>
    	<input type="checkbox" id="checkB" name="examen" onClick="javascript:hide('hidden')"/>
    </p>
    <br/>
    <script type="text/javascript">
	function hide(id) {
		if (document.getElementById("checkB").checked) {
			document.getElementById(id).className = "visible";
		} 
		else {
			document.getElementById(id).className = "hidden";
		}
	}
  </script>
    <p id="hidden" class="hidden">
    	<br/>
	 	<label for="dateExam">Nouvelle date d'examen : </label>
	 	<input type="text" name="dateExam" id="dateExam" value="${stage?.dateExam?.format('dd/MM/yyyy', 'fr')}" />
	</p>
    <br />
    <p style="margin-top:30px">    
        <center><input type="submit" value="Enregistrer le stage" /></center>
    </p>
    <p><i>* Champs obligatoires<i></p>
    </div> 
#{/form}

